<template>
    <div>
    <div style="text-align: center;padding-top: 50px"  v-if="placeSearch">
        <label for="location">找到我们：</label>
        <input type="text" name="location" style="width: 300px;border-radius: 6px" v-model="keyWord"/>
        <button name="search" style="border-radius: 6px" @click="handleSearch">搜索</button>
     </div>
          <div style="padding-top: 30px">
          <div id="searchResult"></div>
          <div id="mapContainer" style="height: 500px;" >正在加载数据 ...</div>
     </div>
 </div>
 </template>
<script>
  import remoteLoad from '../remoteLoad'
  import { MapKey, MapCityName } from '../mapConfig'
  export default {
    props: ['lat', 'lng'],
    data () {
      return {
        keyWord: '吴川',
        placeSearch: null,
        dragStatus: false,
        AMapUI: null,
        AMap: null,
      }
    },
    methods: {
      // 搜索
      handleSearch () {
        if (this.keyWord) {
          this.placeSearch.search(this.keyWord)
      }
      },
      // 实例化地图
      initMap () {
        // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        let AMapUI = this.AMapUI = window.AMapUI
        let AMap = this.AMap = window.AMap
        AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
          let mapConfig = {
            zoom: 16,
            cityName: MapCityName
          }
          if (this.lat && this.lng) {
            mapConfig.center = [this.lng, this.lat]
          }
          let map = new AMap.Map('mapContainer', mapConfig)
          // 加载地图搜索插件
          AMap.service('AMap.PlaceSearch', () => {
            this.placeSearch = new AMap.PlaceSearch({
              pageSize: 5,
              pageIndex: 1,
              citylimit: true,
              city: MapCityName,
              map: map,
              panel: 'searchResult'
            })

          })

          // 启用工具条
          AMap.plugin(['AMap.ToolBar'], function () {
            map.addControl(new AMap.ToolBar({
              position: 'RB'
            }))
          })
          // 创建地图拖拽
          let positionPicker = new PositionPicker({
            mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map: map // 依赖地图对象
          })
          // 拖拽完成发送自定义 drag 事件
          positionPicker.on('success', positionResult => {
            // 过滤掉初始化地图后的第一次默认拖放
            if (!this.dragStatus) {
              this.dragStatus = true
            } else {
              this.$emit('drag', positionResult)
            }
          })
          // 启动拖放
          positionPicker.start()
          
        })
      }
    },
    async created () {
      // 已载入高德地图API，则直接初始化地图
      if (window.AMap && window.AMapUI) {
        this.initMap()
        // 未载入高德地图API，则先载入API再初始化
      } else {
        await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
        await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
        this.initMap()
      }
    }
  }
</script>